@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map.get($config, background);
  $primary: map.get($config, primary);

  .pac-sketch-card {
    position: relative;
    background-color: var(--ngm-color-surface-container-low);

    .mat-mdc-card-avatar {
      overflow: hidden;
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
        margin-right: 5px;
      }
    }

    .mat-mdc-card-header {
      overflow: hidden;

      .mat-mdc-card-header-text {
        overflow: hidden;

        .mat-mdc-card-title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .mat-mdc-card-subtitle {
        margin-bottom: 0;
      }
    }

    .pac-sketch-card__menu {
      position: absolute;
      right: 5px;
      top: 5px;
      opacity: 0;
      transition: all 300ms;

      &.active {
        opacity: 1;
      }
    }

    &:hover {
      .pac-sketch-card__menu {
        opacity: 1;
      }
    }
    &:active {
      transform: scale(0.98);
    }
  }

}
